<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'

export default {
    props: {
        className: {
          type: String,
          default: 'chart'
        },
        width: {
          type: String,
          default: '100%'
        },
        height: {
          type: String,
          default: '300px'
        },
        chartData: {
            type: Object,
            required: true
        }
    },
    watch: {
        chartData: {
            deep: true,
            handler(val) {
                this.setOptions(val)
            }
        }
    },
    data() {
        return {
          chart: null
        }
    },
    mounted() {
        this.initChart();
        this.__resizeHandler = debounce(() => {
          if (this.chart) {
            this.chart.resize()
          }
        }, 100)
        window.addEventListener('resize', this.__resizeHandler)

        // 监听侧边栏的变化
        this.sidebarElm = document.getElementsByClassName('router-sider')[0]
        this.sidebarElm && this.sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler)
    },
    beforeDestroy() {
        if (!this.chart) {
          return
        }
        window.removeEventListener('resize', this.__resizeHandler)
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        sidebarResizeHandler(e) {
            if (e.propertyName === 'width') {
              this.__resizeHandler()
            }
        },
        setOptions({ expectedData, actualData } = {}) {
            this.chart.setOption({
                color: ['#3398DB'],
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : expectedData,
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        show:false
                    }
                ],
                series : [
                    {
                        name:'库存变动',
                        type:'bar',
                        barWidth: '60%',
                        data:actualData
                    }
                ]
            })
        },
        initChart() {
            this.chart = echarts.init(this.$el, 'macarons');
            this.setOptions(this.chartData)
        },
  },
}
</script>
